import { Component } from 'react';
import './Zb.less';
import Tabs  from 'uxcore-tabs';
import Table from 'uxcore-table';
import EmptyData from 'uxcore-empty-data';
import Matrix from 'uxcore-matrix';
import { URLS } from './../../app/variables';
import Message from 'uxcore-message';

export default class Zb extends Component {

  constructor(props) {
    super(props);
    this.state = {
      zbwjFileWait: true,
      zbtzsFileWait: true,
      wdHeight: 120
    };
    this.customRender = this.customRender.bind(this);
    this.hideWait = this.hideWait.bind(this);
    this.onZbwjFileLoad = this.onZbwjFileLoad.bind(this);
    this.onZbtzsFileLoad = this.onZbtzsFileLoad.bind(this);
    this.tabChange = this.tabChange.bind(this);

  }

  customRender(cellData) {
    const style = {
      lineHeight: '50px',
      textAlign: 'left',
      padding: '0 20px',
      overflow: 'hidden',
    };
    if (cellData.type === 'title') {
      if (cellData.row === 2) {
        style.lineHeight = '100px';
      }
      style.textAlign = 'right';
      style.color = 'rgba(0, 0, 0, 0.8)';
      style.fontWeight = 'bold';
      style.background = 'rgba(31,56,88,0.04)';
    }

    let content = cellData.text;
    if (cellData.type === 'link') {
      content = <a>{content}</a>;
    }
    return (
      <div style={style}>
        {content}
      </div>
    );
  }


  tabChange(obj) {
    if (this.props.data.zbwjUrl && (obj === '4' & this.state.zbwjFileWait)) {
      this.setState({
        wdHeight: 725
      })
      Message['loading']('请等待...', 35);
    } else if (this.props.data.zbtzsUrl && (obj === '5' & this.state.zbtzsFileWait)) {
      this.setState({
        wdHeight: 725
      })
      Message['loading']('请等待...', 35);
    } else {
      this.hideWait();
    }
  }

  onZbwjFileLoad() {
    this.setState({zbwjFileWait: false});
    this.hideWait();
  }

  onZbtzsFileLoad() {
    this.setState({zbtzsFileWait: false});
    this.hideWait();
  }

  hideWait() {
    Message['clear']('clear', 5);
  }

  render() {


    const jdata = {
      data: [
        {x: 0, y: 0, row: 1, col: 1, type: 'title', text: '标段编码'},
        {x: 1, y: 0, row: 1, col: 3, type: 'normal', text: this.props.data.bdbh},
        {x: 0, y: 1, row: 1, col: 1, type: 'title', text: '标段名称'},
        {x: 1, y: 1, row: 1, col: 3, type: 'normal', text: this.props.data.name},

        {x: 0, y: 2, row: 1, col: 1, type: 'title', text: '招标方式'},
        {x: 1, y: 2, row: 1, col: 1, type: 'normal', text: this.props.data.fbType},
        {x: 2, y: 2, row: 1, col: 1, type: 'title', text: '项目类型'},
        {x: 3, y: 2, row: 1, col: 1, type: 'normal', text: this.props.data.conType},

        {x: 0, y: 3, row: 1, col: 1, type: 'title', text: '招标组织形式'},
        {x: 1, y: 3, row: 1, col: 1, type: 'normal', text: this.props.data.fsType},
        {x: 2, y: 3, row: 1, col: 1, type: 'title', text: '资格审查方式'},
        {x: 3, y: 3, row: 1, col: 1, type: 'normal', text: this.props.data.zgReview},

        {x: 0, y: 4, row: 1, col: 1, type: 'title', text: '报建时间'},
        {x: 1, y: 4, row: 1, col: 1, type: 'normal', text: this.props.data.bjTime},
        {x: 2, y: 4, row: 1, col: 1, type: 'title', text: '开标时间'},
        {x: 3, y: 4, row: 1, col: 1, type: 'normal', text: this.props.data.kbTime},

        {x: 0, y: 5, row: 1, col: 1, type: 'title', text: '工期承诺 （天）'},
        {x: 1, y: 5, row: 1, col: 1, type: 'normal', text: this.props.data.gqcn},
        {x: 2, y: 5, row: 1, col: 1, type: 'title', text: ' 是否PPP项目'},
        {x: 3, y: 5, row: 1, col: 1, type: 'normal', text: this.props.data.ppp},


        {x: 0, y: 6, row: 1, col: 1, type: 'title', text: '质量承诺'},
        {x: 1, y: 6, row: 1, col: 3, type: 'normal', text: this.props.data.zlcn},

        {x: 0, y: 7, row: 1, col: 1, type: 'title', text: '安全承诺'},
        {x: 1, y: 7, row: 1, col: 3, type: 'normal', text: this.props.data.aqcn},

        {x: 0, y: 8, row: 2, col: 1, type: 'title', text: '招标范围'},
        {x: 1, y: 8, row: 2, col: 3, type: 'normal', text: this.props.data.zbScope},

      ]
    };

    const dldata = {
      data: [
        {x: 0, y: 0, row: 1, col: 1, type: 'title', text: '招标代理公司'},
        {x: 1, y: 0, row: 1, col: 3, type: 'normal', text: this.props.data.zbdl},

        {x: 0, y: 1, row: 1, col: 1, type: 'title', text: '代理合同金额'},
        {x: 1, y: 1, row: 1, col: 1, type: 'normal', text: this.props.data.dlhtje},
        {x: 2, y: 1, row: 1, col: 1, type: 'title', text: '法人'},
        {x: 3, y: 1, row: 1, col: 1, type: 'normal', text: this.props.data.zbdlfr},

        {x: 0, y: 2, row: 1, col: 1, type: 'title', text: '联系人'},
        {x: 1, y: 2, row: 1, col: 1, type: 'normal', text: this.props.data.zbdllxr},

        {x: 2, y: 2, row: 1, col: 1, type: 'title', text: '联系电话'},
        {x: 3, y: 2, row: 1, col: 1, type: 'normal', text: this.props.data.zbdllxrdh},

      ]
    };

    const zbdata = {
      data: [
        {x: 0, y: 0, row: 1, col: 1, type: 'title', text: '中标企业'},
        {x: 1, y: 0, row: 1, col: 3, type: 'normal', text: this.props.data.zbjg},
      ]
    };

    const dlryProps = {
      size: 'small',
      showColumnPicker: false,
      showPager: false,
      jsxdata: {
        "data": this.props.dlry,
      },
      jsxcolumns: [
        {dataKey: 'jobName', title: '岗位', width: 195, ordered: false},
        {dataKey: 'name', title: '姓名', width: 155, ordered: false},
        {dataKey: 'cerNumber', title: '身份证号', width: 205, ordered: false},
        {dataKey: 'zsNum', title: '证书名称', width: 195, ordered: false},
        {dataKey: 'zsNum', title: '证书编号', width: 195, ordered: false},
      ],
    }

    const zbryProps = {
      size: 'small',
      showColumnPicker: false,
      showPager: false,
      jsxdata: {
        "data": this.props.zbry,
      },
      jsxcolumns: [
        {dataKey: 'jobName', title: '岗位', width: 195, ordered: false},
        {dataKey: 'name', title: '姓名', width: 155, ordered: false},
        {dataKey: 'cerNumber', title: '身份证号', width: 205, ordered: false},
        {dataKey: 'zsNum', title: '证书名称', width: 195, ordered: false},
        {dataKey: 'zsNum', title: '证书编号', width: 195, ordered: false},
      ],
    }

    return (
      <div className="mod-zb">
        <Tabs defaultActiveKey="1" type="small" onChange={this.tabChange}>
          <Tabs.TabPane tab="基本信息" key="1">
            <div className="col_1 zb-table-div" style={{height:525}}>
              <Matrix
                data={jdata}
                cellWidth={[160,315,160,315]}
                render={this.customRender}
              />
            </div>
          </Tabs.TabPane>

          <Tabs.TabPane tab="招标代理" key="2">
            <div className="col_1 zb-table-div" style={{height:525}}>
              <Matrix
                data={dldata}
                cellWidth={[160,315,160,315]}
                render={this.customRender}
              />

              <div className="zb-table-div">
                <Table {...dlryProps} ref="dlrygrid"/>
              </div>
            </div>
          </Tabs.TabPane>

          <Tabs.TabPane tab="中标企业" key="3">
            <div className="col_1 zb-table-div" style={{height:525}}>
              <Matrix
                data={zbdata}
                cellWidth={[160,315,160,315]}
                render={this.customRender}
              />

              <div className="zb-table-div">
                <Table {...zbryProps} ref="zbrygrid"/>
              </div>
            </div>
          </Tabs.TabPane>

          <Tabs.TabPane tab="招标文件" key="4">
            <div className="col_1 zb-table-div" style={{height:this.state.wdHeight}}>
              { this.props.data.zbwjUrl ?
                <iframe onLoad={this.onZbwjFileLoad} src={ URLS.zbwj +  '?docId='+  this.props.data.zbwjUrl + '&Authorization=' + this.props.token }
                        height="720" width="1000"
                        frameborder="0"/> :
                <EmptyData style={{ width: '980px' }}/>}
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane tab="中标通知书" key="5">
            <div className="col_1 zb-table-div" style={{height:this.state.wdHeight}}>
              { this.props.data.zbtzsUrl ?
                <iframe onLoad={this.onZbtzsFileLoad} src={ URLS.zbtzs +  '?docId='+  this.props.data.zbtzsUrl + '&Authorization=' + this.props.token}
                        height="720" width="1000"
                        frameborder="0"/> :
                <EmptyData style={{ width: '980px' }}/>}
            </div>
          </Tabs.TabPane>
        </Tabs>
      </div>
    );
  }
}
